<!--
 * @Author: Badcandy 568197314@qq.com
 * @Date: 2022-12-18 18:54:46
 * @LastEditors: 晋龍
 * @LastEditTime: 2023-02-19 16:15:23
 * @FilePath: \dcollege\src\views\home\home.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by Badcandy 568197314@qq.com, All Rights Reserved. 
-->
<template>
    <div class="home">
      <!-- 搜索按钮 -->
      <div class="search">
        <button class="searchBtn">
          <var-icon class="searchIcon" name="magnify" @click="handleSearch()" /><span class="searchText">搜索</span>
        </button>
      </div>
      <!-- 日期功能 -->
      <div class="date">
        <div class="dateHeader">
          <span class="dateNum">{{ dataTime }}</span>
          <span class="weekNum">{{ day }}</span>
        </div>
        <div class="welcome">开始今天的工作吧</div>
      </div>
      
      <!-- 我的课程功能 -->
      <div class="lesson">
        <div class="lessonTitle">
          <div class="left">我的课程</div>
          <div class="right" @click="checkLessons()">全部课程<var-icon name="chevron-right" /></div>
        </div>
        <div class="lessons">
          <div class="lessonCard">
            <var-image class="cardImg" src="./image/lesson1.jpg" alt="" />
            <div class="lessonName">软件工程方法与实践</div>
          </div>
          <div class="lessonCard">
            <var-image class="cardImg" src="./image/lesson1.jpg" alt="" />
            <div class="lessonName">软件工程方法与实践</div>
          </div>
          <div class="lessonCard">
            <var-image class="cardImg" src="./image/lesson1.jpg" alt="" />
            <div class="lessonName">软件工程方法与实践</div>
          </div>
          <div class="lessonCard">
            <var-image class="cardImg" src="./image/lesson1.jpg" alt="" />
            <div class="lessonName">软件工程方法与实践</div>
          </div>
          <div class="lessonCard">
            <var-image class="cardImg" src="./image/lesson1.jpg" alt="" />
            <div class="lessonName">软件工程方法与实践</div>
          </div>
        </div>
      </div>
      <!-- 工作台 -->
      <div class="workbench">
        <div class="workbenchTitle">
          工作台
        </div>
        <div class="workbenchContent">
          <div class="workbenchCard" v-for="item in workbenchList" @click="router.push(item.to)">
            <img :src="imgRequire(item.img)" alt="">
            <div class="workbenchName">{{ item.title }}</div>
          </div>
  
        </div>
      </div>
      <!-- 分割线 -->
      <var-divider class="divider" description="我是有底线的" />
    </div>
  
  </template>
  
  <script setup lang="ts">
  import { useRouter } from "vue-router";
  import { useUserScheduleStore } from '@/stores/schedule'
  import { useExamStore } from '@/stores/exam'
  import { storeToRefs } from 'pinia';
  
  import { ref } from "vue";
  const router = useRouter();
  const userScheduleStore = useUserScheduleStore()
  const examStore = useExamStore()
  // 解构方法和属性
  const { userSchedule } = userScheduleStore
  const { scheduleList } = storeToRefs(userScheduleStore)
  
  const { ExamList } = examStore
  const { examList } = storeToRefs(examStore)
  //定义显示图片的方法
  const imgRequire = (img: string) => {
    try {
      const handlePath = img.replace('.', '.');
      return new URL(handlePath, import.meta.url).href;
    } catch (error) {
      console.warn(error);
    }
  };
  //  工作台图标
  interface workbenchItem {
    img: string;
    title: string;
    to: string;
  }
  const workbenchList = ref<workbenchItem[]>([
    { img: './image/workbench1.png', title: '签到管理', to: '/teachHome' },
    { img: './image/workbench2.png', title: '发布考试', to: '/examListByTeacher' },
    { img: './image/workbench3.png', title: '课程管理', to: '/teachHome' },
    { img: './image/workbench4.png', title: '作业管理', to: '/teachHome' },
    { img: './image/workbench5.png', title: '日程管理', to: '/teachHome' },
    { img: './image/workbench6.png', title: '工作管理', to: '/myWorkload' },
  ])
  
  // 获取当前日期
  //现在的时间
  let dataTime = ref("");
  //今天星期
  const day = ref("");
  
  
  //获取当前的时间
  const getNowTime = () => {
    //时间戳
    const Dates = new Date();
  
    //星期
    const data: number = Dates.getDay();
    //月份下标是0-11
    const Months = Dates.getMonth() + 1 < 10 ? "0" + (Dates.getMonth() + 1) : Dates.getMonth() + 1;
    //具体的天数
    const Day = Dates.getDate() < 10 ? "0" + Dates.getDate() : Dates.getDate();
  
    dataTime.value = `${Months}月${Day}日`;
    day.value = `${data}`;
  
    //数字转化为汉字（优化写法）
    let arr1 = ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"]
  
    let arr = ["1", "2", "3", "4", "5", "6", "0"]
    for (let i in arr) {
      if (arr[i] == day.value) {
        day.value = arr1[i]
      }
    }
    return dataTime.value;
  
  }
  getNowTime();
 
  
  
  

  
  
  
  
  // 点击搜索按钮的方法
  function handleSearch() {
    console.log("搜索方法被点击了");
  }
  // 点击查看全部课程的方法
  function checkLessons() {
    router.push("/lesson");
  }
  </script>
  
  <style lang="less" scoped>
  .home {
    background-image: url("./image/homeBack.png");
    background-repeat: no-repeat;
    background-size: 400px 180px;
  }
  
  .search {
    margin-top: 40px;
    display: inline-block;
  
    .searchBtn {
      position: absolute;
      right: 10px;
      width: 80px;
      background-color: rgb(244, 246, 250);
      border: none;
      border-radius: 16px;
      padding: 4px;
      font-size: 14px;
  
      .searchIcon {
        --icon-size: 17px;
        color: #c6c3c3;
      }
  
      .searchText {
        margin-right: 2px;
        margin-bottom: 10px;
        color: #c6c3c3;
        font-family: "PingFang";
      }
    }
  }
  
  .date {
    .dateHeader {
      display: flex;
      margin-top: 35px;
      margin-left: 25px;
  
      // font-family: 'PingFang';
      .dateNum {
        font-size: 27px;
        font-weight: 700;
      }
  
      .weekNum {
        font-weight: 700;
        font-size: 15px;
        margin-top: 15px;
        margin-left: 13px;
      }
    }
  
    .welcome {
      font-size: 15px;
      font-weight: 600;
      margin-left: 28px;
      margin-top: 10px;
    }
  }
  
  
  
  .lesson {
    margin-left: 15px;
    margin-top: 30px;
  
    ::-webkit-scrollbar {
      display: none;
    }
  
    .lessonTitle {
      display: flex;
      justify-content: space-between;
  
      .left {
        font-size: 17px;
        font-weight: 800;
      }
  
      .right {
        margin-top: 6px;
        margin-right: 10px;
        font-size: 14px;
        color: #868484;
      }
    }
  
    .lessons {
      margin-top: 10px;
      height: 110px;
      width: 360px;
      border-radius: 10px;
      background-color: #fff;
      display: flex;
      overflow: auto;
  
  
      .lessonCard {
        padding: 10px;
        width: 80px;
        margin-right: -15px;
  
        .cardImg {
          width: 50px;
          height: 50px;
          border-radius: 10px;
        }
  
        .lessonName {
          font-size: 12px;
          font-weight: 900;
        }
      }
    }
  }
  
  .workbench {
    margin-left: 15px;
    margin-top: 5px;
  
    .workbenchTitle {
      font-size: 17px;
      font-weight: 800;
    }
  
    .workbenchContent {
      margin-top: 10px;
      width: 360px;
      height: 180px;
      background-color: #fff;
      border-radius: 10px;
      display: flex;
      // justify-content: space-between;
      flex-wrap: wrap;
  
      .workbenchCard {
        padding: 9px 15px;
        width: 60px;
        height: 65px;
        margin-top: 8px;
  
        img {
          margin-left: 13px;
          width: 35px;
        }
  
        .workbenchName {
          text-align: center;
          font-size: 13px;
        }
      }
    }
  }
  
  .divider {
    padding-top: 10px;
  }
  </style>
  